import { defineComponent, ref, reactive } from 'vue'

export default defineComponent({
  name: 'Vue3FeaturesDemo',
  setup() {
    // 响应式数据
    const showContent = ref(true)
    const inputValue = ref('')
    const selectedColor = ref('red')
    const items = ref([
      { id: 1, name: '项目 1', visible: true },
      { id: 2, name: '项目 2', visible: false },
      { id: 3, name: '项目 3', visible: true },
      { id: 4, name: '项目 4', visible: true }
    ])
    
    const colors = [
      { name: '红色', value: 'red' },
      { name: '绿色', value: 'green' },
      { name: '蓝色', value: 'blue' }
    ]
    
    // 方法
    const toggleContent = () => {
      showContent.value = !showContent.value
    }
    
    const addItem = () => {
      if (inputValue.value.trim()) {
        items.value.push({ 
          id: items.value.length + 1, 
          name: inputValue.value, 
          visible: true 
        })
        inputValue.value = ''
      }
    }
    
    const removeItem = (id: number) => {
      items.value = items.value.filter(item => item.id !== id)
    }
    
    const toggleItemVisibility = (id: number) => {
      const item = items.value.find(item => item.id === id)
      if (item) {
        item.visible = !item.visible
      }
    }
    
    // 返回渲染函数
    return () => (
      <div class="vue3-features-demo p-6 max-w-6xl mx-auto bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
        <div class="text-center mb-10 pt-6">
          <h1 class="text-4xl font-bold mb-4 text-gray-800">Vue 3 特有语法 TSX 实现</h1>
          <p class="text-lg text-gray-600 max-w-2xl mx-auto">
            展示 Vue 3 中各种特有语法在 TSX 中的实现方式，包括条件渲染、列表渲染、表单绑定等
          </p>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* v-if 示例 */}
          <div class="bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl">
            <div class="flex items-center mb-4">
              <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
              <h2 class="text-xl font-semibold text-gray-800">v-if / v-else / v-else-if</h2>
            </div>
            <button 
              class="px-4 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-lg hover:from-blue-600 hover:to-indigo-700 transition-all duration-300 mb-4 shadow-md"
              onClick={toggleContent}
            >
              切换内容显示
            </button>
            
            {/* v-if 实现 */}
            {showContent.value ? (
              <div class="p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border border-green-200 animate-fade-in">
                <p class="text-green-800 font-medium mb-2">这是通过 v-if 显示的内容</p>
                <p class="text-green-700">当前时间: {new Date().toLocaleString()}</p>
              </div>
            ) : (
              <div class="p-4 bg-gradient-to-r from-red-50 to-rose-50 rounded-lg border border-red-200 animate-fade-in">
                <p class="text-red-800 font-medium">这是 v-else 显示的内容</p>
              </div>
            )}
          </div>
          
          {/* v-show 示例 */}
          <div class="bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl">
            <div class="flex items-center mb-4">
              <div class="w-3 h-3 bg-purple-500 rounded-full mr-2"></div>
              <h2 class="text-xl font-semibold text-gray-800">v-show</h2>
            </div>
            <button 
              class="px-4 py-2 bg-gradient-to-r from-purple-500 to-fuchsia-600 text-white rounded-lg hover:from-purple-600 hover:to-fuchsia-700 transition-all duration-300 mb-4 shadow-md"
              onClick={toggleContent}
            >
              切换内容显示 (v-show)
            </button>
            
            {/* v-show 实现 */}
            <div 
              class="p-4 bg-gradient-to-r from-yellow-50 to-amber-50 rounded-lg border border-yellow-200"
              style={{ display: showContent.value ? 'block' : 'none' }}
            >
              <p class="text-amber-800 font-medium mb-2">这是通过 v-show 控制显示的内容</p>
              <p class="text-amber-700">v-show 通过 CSS 的 display 属性控制元素显示/隐藏</p>
            </div>
          </div>
          
          {/* v-for 示例 */}
          <div class="bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl lg:col-span-2">
            <div class="flex items-center mb-4">
              <div class="w-3 h-3 bg-cyan-500 rounded-full mr-2"></div>
              <h2 class="text-xl font-semibold text-gray-800">v-for</h2>
            </div>
            <div class="mb-4 flex flex-col sm:flex-row gap-2">
              <input 
                class="p-3 border border-gray-300 rounded-lg flex-grow focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent"
                value={inputValue.value}
                onInput={(e) => inputValue.value = (e.target as HTMLInputElement).value}
                placeholder="输入新项目名称"
              />
              <button 
                class="px-4 py-3 bg-gradient-to-r from-cyan-500 to-teal-600 text-white rounded-lg hover:from-cyan-600 hover:to-teal-700 transition-all duration-300 shadow-md flex items-center justify-center"
                onClick={addItem}
              >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                </svg>
                添加项目
              </button>
            </div>
            
            {/* v-for 实现 */}
            <ul class="space-y-3">
              {items.value.map(item => (
                <li 
                  key={item.id} 
                  class="flex justify-between items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors duration-200"
                >
                  <span class={`text-gray-800 ${!item.visible ? 'line-through text-gray-400' : ''}`}>{item.name}</span>
                  <div class="flex space-x-2">
                    <button 
                      class={`px-3 py-1 rounded text-sm transition-all duration-300 flex items-center ${item.visible ? 'bg-blue-500 hover:bg-blue-600 text-white' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'}`}
                      onClick={() => toggleItemVisibility(item.id)}
                    >
                      {item.visible ? (
                        <>
                          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd" />
                            <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
                          </svg>
                          隐藏
                        </>
                      ) : (
                        <>
                          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
                          </svg>
                          显示
                        </>
                      )}
                    </button>
                    <button 
                      class="px-3 py-1 bg-gradient-to-r from-red-500 to-rose-600 text-white rounded text-sm hover:from-red-600 hover:to-rose-700 transition-all duration-300 flex items-center"
                      onClick={() => removeItem(item.id)}
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                      </svg>
                      删除
                    </button>
                  </div>
                </li>
              ))}
            </ul>
          </div>
          
          {/* v-model 示例 */}
          <div class="bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl">
            <div class="flex items-center mb-4">
              <div class="w-3 h-3 bg-emerald-500 rounded-full mr-2"></div>
              <h2 class="text-xl font-semibold text-gray-800">v-model</h2>
            </div>
            <div class="mb-4">
              <label class="block mb-2 text-gray-700 font-medium">输入文本:</label>
              {/* v-model 实现 */}
              <input 
                class="p-3 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
                value={inputValue.value}
                onInput={(e) => inputValue.value = (e.target as HTMLInputElement).value}
              />
            </div>
            
            <div class="mb-4 p-3 bg-gray-50 rounded-lg">
              <p class="text-gray-700">输入的文本: <span class="font-medium text-emerald-600">{inputValue.value}</span></p>
            </div>
            
            <div>
              <label class="block mb-2 text-gray-700 font-medium">选择颜色:</label>
              {/* v-model 实现 (单选按钮) */}
              <div class="space-y-2">
                {colors.map(color => (
                  <label key={color.value} class="inline-flex items-center mr-4 cursor-pointer">
                    <input 
                      type="radio" 
                      class="h-4 w-4 text-emerald-600 focus:ring-emerald-500"
                      value={color.value}
                      checked={selectedColor.value === color.value}
                      onChange={(e) => selectedColor.value = (e.target as HTMLInputElement).value}
                    />
                    <span class="ml-2 text-gray-700">{color.name}</span>
                  </label>
                ))}
              </div>
            </div>
            
            <div 
              class="mt-4 p-4 rounded-lg text-center transition-all duration-300"
              style={{ backgroundColor: selectedColor.value }}
            >
              <p class="font-medium text-gray-800">选中的颜色: {selectedColor.value}</p>
            </div>
          </div>
          
          {/* v-on 示例 */}
          <div class="bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl">
            <div class="flex items-center mb-4">
              <div class="w-3 h-3 bg-amber-500 rounded-full mr-2"></div>
              <h2 class="text-xl font-semibold text-gray-800">v-on 事件处理</h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="p-4 border border-gray-200 rounded-lg">
                <h3 class="font-medium mb-2 text-gray-700">点击事件</h3>
                <button 
                  class="px-4 py-2 bg-gradient-to-r from-amber-500 to-orange-600 text-white rounded-lg hover:from-amber-600 hover:to-orange-700 transition-all duration-300 w-full"
                  onClick={() => {
                    console.log('点击事件触发')
                    alert('点击事件触发')
                  }}
                >
                  点击我
                </button>
              </div>
              
              <div class="p-4 border border-gray-200 rounded-lg">
                <h3 class="font-medium mb-2 text-gray-700">键盘事件</h3>
                <input 
                  class="p-2 border border-gray-300 rounded w-full focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
                  placeholder="按回车键测试"
                  onKeydown={(e) => {
                    if (e.key === 'Enter') {
                      console.log('回车键被按下')
                      alert('回车键被按下')
                    }
                  }}
                />
              </div>
              
              <div class="p-4 border border-gray-200 rounded-lg">
                <h3 class="font-medium mb-2 text-gray-700">鼠标事件</h3>
                <button 
                  class="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-lg hover:from-green-600 hover:to-emerald-700 transition-all duration-300 w-full"
                  onMouseenter={() => console.log('鼠标进入')}
                  onMouseleave={() => console.log('鼠标离开')}
                >
                  悬停我
                </button>
              </div>
              
              <div class="p-4 border border-gray-200 rounded-lg">
                <h3 class="font-medium mb-2 text-gray-700">表单事件</h3>
                <input 
                  class="p-2 border border-gray-300 rounded w-full focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
                  placeholder="输入内容触发 change 事件"
                  onChange={(e) => {
                    console.log('输入值改变:', (e.target as HTMLInputElement).value)
                    alert(`输入值改变: ${(e.target as HTMLInputElement).value}`)
                  }}
                />
              </div>
            </div>
          </div>
          
          {/* 条件渲染和列表渲染组合 */}
          <div class="bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl lg:col-span-2">
            <div class="flex items-center mb-4">
              <div class="w-3 h-3 bg-violet-500 rounded-full mr-2"></div>
              <h2 class="text-xl font-semibold text-gray-800">条件渲染和列表渲染组合</h2>
            </div>
            {items.value.length > 0 ? (
              <div>
                <p class="mb-4 text-gray-700">可见项目列表:</p>
                <ul class="space-y-2">
                  {items.value
                    .filter(item => item.visible) // 过滤可见项目
                    .map(item => (
                      <li key={item.id} class="p-3 bg-gradient-to-r from-violet-50 to-purple-50 rounded-lg border border-violet-200 flex items-center">
                        <div class="w-2 h-2 bg-violet-500 rounded-full mr-3"></div>
                        <span class="text-violet-800">{item.name}</span>
                      </li>
                    ))
                  }
                </ul>
              </div>
            ) : (
              <div class="text-center py-8">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-gray-400 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                </svg>
                <p class="text-gray-500">暂无项目</p>
              </div>
            )}
          </div>
        </div>
        
        <div class="text-center mt-10 pt-6 border-t border-gray-200 text-gray-500 text-sm">
          <p>Vue 3 特有语法 TSX 实现演示</p>
        </div>
      </div>
    )
  }
})